<script setup lang="ts"></script>

<template>
  <nav class="block h-full w-full">
    <ul class="flex justify-around">
      <li class="">
        <router-link
          class="block h-6 w-6 bg-dashboardG bg-[length:24px_24px] bg-no-repeat hover:bg-dashboardP"
          to="/SoViBoard"
        ></router-link>
      </li>
      <li>
        <router-link
          class="block h-6 w-6 bg-sportG bg-[length:24px_24px] bg-no-repeat hover:bg-sportP"
          to="/SportsRound"
        >
        </router-link>
      </li>
      <section class="duration-150 hover:scale-105">
        <router-link to="/">
          <img src="../assets/img/owl.png" alt="logo" width="25" height="25"
        /></router-link>
      </section>
      <li>
        <router-link
          class="block h-6 w-6 bg-cookingG bg-[length:24px_24px] bg-no-repeat hover:bg-cookingP"
          to="/WTC"
        >
        </router-link>
      </li>
      <li>
        <router-link
          class="block h-6 w-6 bg-codingG bg-[length:24px_24px] bg-no-repeat hover:bg-codingP"
          to="/Coding"
        >
        </router-link>
      </li>
    </ul>
  </nav>
</template>
